<template>
  <a-modal
    v-model:visible="visible"
    :title="isAudit == 0 ? '查看护理报告' : '审核护理报告'"
    width="80%"
    :footer="null"
    @cancel="cancle"
    class="user-modal"
  >
    <slot>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <block v-if="!directShow">
          <a-descriptions
            bordered
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="服务对象">{{
              report.userName
            }}</a-descriptions-item>
            <a-descriptions-item label="服务项目">{{
              report.serviceName
            }}</a-descriptions-item>
            <a-descriptions-item label="服务地址">{{
              report.address
            }}</a-descriptions-item>
            <a-descriptions-item label="服务护士">{{
              report.nurseName
            }}</a-descriptions-item>
            <a-descriptions-item label="服务时间">{{
              nursingRecord.createdAt
            }}</a-descriptions-item>
          </a-descriptions>
          <a-divider></a-divider>
        </block>

        <a-tag color="processing" style="padding: 5px 20px; margin-bottom: 20px"
          >护理图</a-tag
        >
        <a-form-item label="图片">
          <!-- <div > -->
          <a-image
            v-for="(item, i) in nursingRecord.staPictureUrl"
            :key="i"
            :width="100"
            :src="item"
          />

          <!-- </div> -->
        </a-form-item>
        <!-- <a-form-item label="护理后">
          <a-image :width="100" :src="nursingRecord.endPictureUrl" />
        </a-form-item> -->
        <a-form-item label="患者主诉">{{
          nursingRecord.principleAction
        }}</a-form-item>
        <a-form-item label="体征检查">
          <a-row>
            <a-col :span="3"> 体温：{{ nursingRecord.animalHeat }} </a-col>
            <a-col :span="3"> 心跳：{{ nursingRecord.sphygmus }} </a-col>
            <a-col :span="3"> 呼吸：{{ nursingRecord.breathe }} </a-col>
            <a-col :span="3"> 血压{{ nursingRecord.breathe }} </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="护理内容">{{
          nursingRecord.nursingContent
        }}</a-form-item>
        <a-form-item label="健康指导">{{
          nursingRecord.healthGuidance
        }}</a-form-item>

        <!-- 审核护理报告:未通过 -->
        <template v-if="nursingRecord.reasonForRejection">
          <a-form-item label="拒绝原因">{{
            nursingRecord.reasonForRejection
          }}</a-form-item>
        </template>
      </a-form>
      <!-- 底部内容 -->
      <a-row v-if="isShowClose">
        <a-col :span="12" :offset="12">
          <a-button type="info" @click="cancle">关闭</a-button>
        </a-col>
      </a-row>
    </slot>

    <!-- 审核护理报告插槽 -->
    <div>
      <slot name="audit"> </slot>
    </div>
  </a-modal>
</template>
<script>
import { onMounted, reactive, ref } from "vue";
import { selectNursingRecordByNumber } from "@/api/order/index";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    number: {
      type: Number,
      default: "",
    },
    report: {
      type: Object,
      default: () => {},
    },
    // 是否直接展示护理报告
    directShow: {
      type: Boolean,
      default: false,
    },
    // 是否审核护理报告
    isAudit: {
      type: Number,
      default: "",
    },
    isShowClose: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { emit, attrs }) {
    console.log(props, "护理报告");
    // 取消，右上角这个关闭也要调用这个方法
    const cancle = () => {
      emit("closeModal");
    };
    const report = ref("");
    const nursingRecord = ref("");

    if (!props.directShow) {
      init();
    } else {
      nursingRecord.value = props.report;
    }
    async function init() {
      let res = await selectNursingRecordByNumber(props.number);
      if (res.success) {
        report.value = res.object;
        // for (let key in res.object.nursingRecord) {
        //   if (!res.object.nursingRecordt[key]) {
        //     res.object.nursingRecord[key] = "未填写";
        //   }
        // }
        let obj = res.object.nursingRecord;
        obj.staPictureUrl = obj.staPictureUrl.split(",");
        nursingRecord.value = res.object.nursingRecord;
      }
    }
    onMounted(() => {});
    return {
      labelCol: { style: { width: "100px", fontWeight: "bolder" } },
      wrapperCol: { span: 20, offset: 1 },
      cancle,
      report,
      nursingRecord,
    };
  },
};
</script>
<style scoped>
.ant-form-item {
  margin-bottom: 10px;
}
</style>
